<template>
    <div class="box">
        <!-- 顶部搜索框 -->
        <div class="search">
            <el-input class="inputUser" v-model="userId" placeholder="请输入用户ID"></el-input>
            <el-input class="inputNumber" v-model="orderSn" placeholder="请输入订单编号"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">查找</el-button>
            <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="订单信息.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="primary" icon="el-icon-download" >导出</el-button>
              </download-excel>
               <!-- 嵌套的表单 用来添加或编辑内容 -->
            <el-dialog title="订单详情" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules">
                    <el-form-item 
                    label="订单编号" 
                    :label-width="formLabelWidth"
                    prop="name"
                    >
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="订单用户" :label-width="formLabelWidth">
                        <el-input v-model="form.keywords" autocomplete="off"></el-input>
                    </el-form-item>
        
        
                    <el-form-item label="用户留言" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="收货信息" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品信息" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="费用信息" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="支付信息" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="快递信息" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="收货信息" :label-width="formLabelWidth">
                        <el-input v-model="form.desc" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <!-- 表格区域 -->
        <el-table
            class="elTable"
            :data="tableData"
            border>
            <el-table-column
            prop="orderSn"
            label="订单编号"
            sortable
            width="160">
            </el-table-column>
            <el-table-column
            prop="userId"
            label="用户ID"
            width="120">
            </el-table-column>
            <el-table-column
            prop="orderStatus"
            label="订单状态"
            width="120"
            >
            </el-table-column>
            <el-table-column
            prop="orderPrice"
            label="订单金额"
            width="120">
            </el-table-column>
            <el-table-column
            prop="goodsPrice"
            label="支付金额"
            width="120">
            </el-table-column>
            <el-table-column
            prop="code"
            label="支付时间"
            >
            </el-table-column>
            <el-table-column
            prop="code"
            label="物流单号"
            >
            </el-table-column>
            <el-table-column
            prop="code"
            label="物流渠道"
            >
            </el-table-column>
            <el-table-column
            prop=""
            label="操作"
            width="200">
                <template slot-scope="scope">
                    <el-button
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                </template>

            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40,50,100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { orderList} from '@/api/shopping'
export default{
    name:'orderList',
    props:[],
    data(){
        return{
            userId:'',
            orderSn:'',
            tableData:[],
            currentPage:1,
            limit:10,
            total:1,
            title:'订单管理信息',//excel表格标题
            json_fields: {
                "订单ID":'id',
                "订单编号":'orderSn',
                "用户ID":'userId',
                "订单状态":'orderStatus',
                "是否删除":'',
                "收货人":'consignee',
                "收货人联系电话":'mobile',
                "收货地址":'address',
            },
            // 导出excel表格
            DetailsForm: [],
            // 嵌套表单内容
            dialogFormVisible: false,//决定弹出层是否弹出
            // 弹出层input 关联的信息
            form: {
                name: '',
                picUrl:'',
                floorPrice:'',
                desc: ''
            },
        }
    },
    methods:{
        // 制造商商品列表接口 函数
        orderList(data){
            orderList(data).then(res=>{
                console.log(res);
                this.tableData=res.data.items //赋值给表格内容数据渲染
                this.total=res.data.total  // 将总条数拿出来
                this.DetailsForm=res.data.items  // 导出表格需要的数据
            })
        },
        // 搜索按钮
        search(){ 
            console.log(this.currentPage);
            console.log(this.limit);
            this.orderList({
                page:this.currentPage,
                limit:this.limit,
                userId:this.userId,
                orderSn:this.orderSn,
            })
        },

        // 分页方法
        handleSizeChange(e){
            this.currentPage=1
            this.limit=e
            console.log(this.limit);
            this.orderList({
                page:this.currentPage,
                limit:this.limit,
            })
        },
        handleCurrentChange(e){
            this.currentPage=e
            this.orderList({
                page:this.currentPage,
                limit:this.limit,
            })
        },
        // 弹出详情页
        handleEdit(index,row){
            this.dialogFormVisible=true
        },
   
    },
    // mounted生命周期
    mounted(){
        this.orderList()
    },
    // 计算属性
    computed:{

    }
}
</script>
<style lang="less">
.box{
    padding-right: 40px;
    // 顶部查询框
    .search{
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        .inputUser{
            width: 200px;
            margin-left: 20px;
        }
        .inputNumber{
            width: 200px; 
            margin: 0 10px;
        }
        .export-excel-wrapper{
            margin-left: 10px;
        }
    }
    // 弹出层 添加或编辑 input框宽度
    .el-input{
        width: 450px;
    }
    // 表格内容
    .elTable{
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
    }
    .cell{
        text-align: center;
    }
    // 分页
    .block{
        margin-left: 20px;
        margin-top: 30px;
    }
}

</style>